﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div class="mainleft" >
    <span class="configHead">API Functions</span>
    <ul class="options">
        <li>
            <input id="typeColumn" name="seriesType"
                   type="radio" value="column" checked="checked" autocomplete="off" />
            <label for="typeColumn">Columns</label>
        </li>
        <li>
            <input id="typeBar" name="seriesType"
                   type="radio" value="bar" autocomplete="off" />
            <label for="typeBar">Bars</label>
        </li>
        <li>
            <input id="typeLine" name="seriesType"
                   type="radio" value="line" autocomplete="off" />
            <label for="typeLine">Lines</label>
        </li>
        <li>
            <input id="stack" type="checkbox" autocomplete="off" checked="checked" />
            <label for="stack">Stacked</label>
        </li>
    </ul>
    <p>
        <strong>refresh()</strong> will be called on each configuration change
    </p>
    
    <div class="box">
        <h4>Advanced Export options</h4>
        <div class="box-col">
            <button class='export-pdf k-button'>Export as PDF</button>
            
        </div>
        <div class="box-col">
            <button class='export-img k-button'>Export as Image</button>
        </div>
        <div class="box-col">
            <button class='export-svg k-button'>Export as SVG</button>
        </div>
    </div>

    <script>
        $(".export-pdf").click(function () {
            var chart = $("#chart").getKendoChart();
            chart.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {
                kendo.saveAs({
                    dataURI: data,
                    fileName: "chart.pdf",
                    proxyURL: "@Url.Action("Export_Save", "Demo")"
                });
            });
        });

        $(".export-img").click(function () {
            var chart = $("#chart").getKendoChart();
            chart.exportImage().done(function (data) {
                kendo.saveAs({
                    dataURI: data,
                    fileName: "chart.png",
                    proxyURL: "@Url.Action("Export_Save", "Demo")"
                });
            });
        });

        $(".export-svg").click(function () {
            var chart = $("#chart").getKendoChart();
            chart.exportSVG().done(function (data) {
                kendo.saveAs({
                    dataURI: data,
                    fileName: "chart.svg",
                    proxyURL: "@Url.Action("Export_Save", "Demo")"
                });
            });
        });
    </script>
</div>
<div class="mainright">
   
    @(Html.Kendo().Chart()
          .Name("chart").Theme("metro")
          .Title("Site Visitors Stats \n /thousands/")
          .Legend(legend => legend
              .Visible(false)
          )
          .ChartArea(chartArea => chartArea
              .Background("transparent")
          )
          .Series(series => series.Bar(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits"))
          .CategoryAxis(axis => axis
              .Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
              .MajorGridLines(lines => lines.Visible(false))
          )
          .ValueAxis(axis => axis
              .Numeric()
          
              .Line(line => line.Visible(false))
              .MajorGridLines(lines => lines.Visible(true))
          )
          .Tooltip(tooltip => tooltip
              .Visible(true)
              .Template("#= series.name #: #= value #")
          )
          )
    
</div>
